<template>
  <div class="panel-container">
    <div class="panel-content">
      <div class="panel-line space-between">
        <div class="panel-title">发布量走势图</div>
        <el-button type="text" style="padding: 0" @click="handleMore">查看更多>></el-button>
      </div>
      <div class="panel-line flex-end">
        <el-radio-group v-model="tabActive" @change="handleChange" style="margin-right: 30px" size="mini">
          <el-radio-button v-for="item in tabList" :key="item.id" :label="item.id">{{ item.label }}</el-radio-button>
        </el-radio-group>
      </div>
      <MixChart :chartData="chartData" :xAxis="xAxis" />
    </div>
    <div class="panel-content">
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="panel-title">资产信息-分类(Top10)</div>
          <div class="panel-list">
            <div class="panel-item" v-for="(item, index) in topCate" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.nums / topCate[0].nums) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.nums }}</span>
              </div>
            </div>
          </div>
          <el-empty v-if="topCate.length === 0"></el-empty>
        </el-col>
        <el-col :span="12">
          <div class="panel-title">资产信息-关键词(Top10)</div>
          <div class="panel-list">
            <div class="panel-item" v-for="(item, index) in topWords" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.nums / topWords[0].nums) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.nums }}</span>
              </div>
            </div>
          </div>
          <el-empty v-if="topWords.length === 0"></el-empty>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="panel-title">资产信息-省份</div>
          <div class="panel-list sheng">
            <div class="panel-item" v-for="(item, index) in topSheng" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.nums / topSheng[0].nums) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.nums }}</span>
              </div>
            </div>
          </div>
          <el-empty v-if="topSheng.length === 0"></el-empty>
        </el-col>
        <el-col :span="12">
          <div class="panel-title">资产订阅-关键词(Top10)</div>
          <div class="panel-list">
            <div class="panel-item" v-for="(item, index) in subWordsTop10" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.nums / subWordsTop10[0].nums) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.nums }}</span>
              </div>
            </div>
          </div>
          <el-empty v-if="subWordsTop10.length === 0"></el-empty>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="panel-title">搜索词(Top10)</div>
          <div class="panel-list">
            <div class="panel-item" v-for="(item, index) in searchWordsTop10" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.nums / searchWordsTop10[0].nums) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.nums }}</span>
              </div>
            </div>
          </div>
          <el-empty v-if="searchWordsTop10.length === 0"></el-empty>
        </el-col>
        <el-col :span="12">
          <div class="panel-title">查看-关键词(Top10)</div>
          <div class="panel-list">
            <div class="panel-item" v-for="(item, index) in lookWordsTop10" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.nums / lookWordsTop10[0].nums) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.nums }}</span>
              </div>
            </div>
          </div>
          <el-empty v-if="lookWordsTop10.length === 0"></el-empty>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="panel-title">联系-关键词(Top10)</div>
          <div class="panel-list">
            <div class="panel-item" v-for="(item, index) in contactWordsTop10" :key="item.name + index">
              <div class="panel-line line1">
                <span class="text-index">第{{ index + 1 }}名</span>
                <span class="text-name">{{ item.name }}</span>
              </div>
              <div class="panel-line space-between">
                <div class="bar">
                  <div class="inner" :style="{ width: (item.nums / contactWordsTop10[0].nums) * 100 + '%' }"></div>
                </div>
                <span class="text-num">{{ item.nums }}</span>
              </div>
            </div>
          </div>
          <el-empty v-if="contactWordsTop10.length === 0"></el-empty>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import MixChart from '@/components/ECharts/MixChart.vue'
import { apiAssetCountTop10 } from '@/api/assetsPublic'

export default {
  name: 'Panel2',
  props: {
    time: Object,
  },
  components: { MixChart },
  watch: {
    time: function () {
      this.getData()
    },
  },
  data() {
    return {
      tabActive: 1,
      tabList: [
        { id: 1, label: '日' },
        { id: 2, label: '周' },
        { id: 3, label: '月' },
      ],
      legend: [
        { name: '员工发布', value: 'employee', type: 'bar' },
        { name: '独享公开', value: 'no_share', type: 'bar' },
        { name: 'AI采集', value: 'AI_collect', type: 'bar' },
        { name: '社群', value: 'community', type: 'bar' },
        { name: '新媒体', value: 'media', type: 'bar' },
        { name: '用户发布', value: 'user', type: 'bar' },
        { name: '合计发布', value: 'total', type: 'line' },
      ],
      xAxis: [],
      chartData: [],
      topCate: [],
      topSheng: [],
      topWords: [],
      subWordsTop10: [],
      searchWordsTop10: [],
      lookWordsTop10: [],
      contactWordsTop10: [],
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    getData() {
      apiAssetCountTop10({ ...this.time, method: this.tabActive }).then((res) => {
        const { bar_line, top_cate, top_sheng, top_words, sub_words_top10, search_words_top10, look_words_top10, contact_words_top10 } = res
        this.setChartsData(bar_line)
        this.setRankData({ top_cate, top_sheng, top_words, sub_words_top10, search_words_top10, look_words_top10, contact_words_top10 })
      })
    },
    handleChange() {
      this.getData()
    },
    setChartsData(data) {
      this.xAxis = data.x
      this.chartData = []
      this.legend.forEach((item) => {
        this.chartData.push({
          name: item.name,
          data: data[item.value],
          type: item.type,
        })
      })
    },
    setRankData(data) {
      const { top_cate, top_sheng, top_words, sub_words_top10, search_words_top10, look_words_top10, contact_words_top10 } = data
      this.topCate = top_cate.sort((a, b) => {
        return b.nums - a.nums
      })
      this.topSheng = top_sheng
        .filter((item) => item.nums > 0)
        .sort((a, b) => {
          return b.nums - a.nums
        })
      this.topWords = top_words.sort((a, b) => {
        return b.nums - a.nums
      })
      this.subWordsTop10 = sub_words_top10.sort((a, b) => {
        return b.nums - a.nums
      })
      this.searchWordsTop10 = search_words_top10.sort((a, b) => {
        return b.nums - a.nums
      })
      this.lookWordsTop10 = look_words_top10.sort((a, b) => {
        return b.nums - a.nums
      })
      this.contactWordsTop10 = contact_words_top10.sort((a, b) => {
        return b.nums - a.nums
      })
    },
    // 查看更多
    handleMore() {
      this.$store.dispatch('permission/routeAuthorization', 'AssetManagement').then((res) => {
        const { start_time, end_time } = this.time
        this.$bus.$emit('forceUpdate', 'AssetManagement')
        this.$router.push({
          path: '/assetsPublic/assetManagement',
          query: { start_time, end_time },
        })
      })
    },
  },
}
</script>

<style scoped lang="scss">
.panel-line {
  align-items: flex-start;
}

.panel-list {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  overflow-y: auto;
  padding-right: 17px;
  &.sheng {
    padding-right: 0;
  }
}
.panel-item {
  width: 80%;
  margin-bottom: 16px;
  .line1 {
    margin-bottom: 6px;
  }
  .text-index {
    margin-right: 20px;
  }
  .bar {
    width: 80%;
    height: 10px;
    .inner {
      width: 50%;
      height: 100%;
      background: #5db42c;
      border-radius: 0 5px 5px 0;
      opacity: 0.8;
    }
  }
}
.panel-content {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.panel-title {
  margin-top: 50px;
}
</style>
